<template>
  <div>
    <div class="dis-flex">
      <div class="size-menu">
        <div class="size-menu-li" v-for="(item,index) in tabList" :key="index" @click="changeTab(index)">{{item.name}}</div>
      </div>
      <div class="size-table">
        <table border="1" cellspacing="0" cellpadding="0" v-for="(item,index) in list" :key="index">
          <thead>
            <td colspan="4">{{item.name}}</td>
          </thead>
          <tbody>
            <th v-for="(item2,index) in item.child" :key="index">
              <!-- <el-input v-model="item2.name" /> -->
              <input type="text" v-model="item2.name">
            </th>
            <tr>
              <td v-for="(item3,index) in item.child2" :key="index">
                <el-input v-model="item3.name" />
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="add">添加</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tabList: [{
        name: "Men"
      }, {
        name: "Men"
      }, {
        name: "Men"
      }],
      list: [{
        name: "In",
        child: [{
          name: "Size",
        }, {
          name: "Size",
        }, {
          name: "Size",
        }, {
          name: "Size",
        }],
        child2: [{
          name: "2xs"
        }, {
          name: "under 5'5"
        }, {
          name: "24-26"
        }, {
          name: "32-34"
        }]
      }]
    }
  },
  methods: {
    changeTab(index) {

    }
  }
}
</script>
<style scoped lang="scss">
.dis-flex {
  display: flex;
}
.size-menu {
  margin-left: 10px;
  .size-menu-li {
    border: 1px solid #d9d9d9;
    padding: 8px 20px;
    font-size: 12px;
    background-color: #f7f7f7;
    cursor: pointer;
    &.actived {
      background-color: #fff;
    }
  }
}
.size-table {
  margin-left: 10px;
  display: flex;
  table {
    border: 1px solid #d9d9d9;
    thead {
      text-align: center;
      td {
        height: 30px;
      }
    }
    tbody {
      th {
        width: 80px;
        font-size: 14px;
        font-weight: bold;
        td {
          padding: 10px 0px;
        }
      }
    }
  }
}
.add {
  border: 1px dashed rgba(50, 145, 248, 1);
  color: rgba(50, 145, 248, 1);
  text-align: center;
  margin-top: 10px;
  width: 100%;
  height: 28px;
  line-height: 28px;
  font-size: 12px;
  cursor: pointer;
}
</style>